<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8" />
        <title>Data URI Schemer</title>
        
        <style>
            * { 
                -webkit-box-sizing: border-box;
            }
            
            body {
                font-family: "Meiryo", sans-serif;
                font-size: 13px;
                line-height: 1.5em;
                background: white;
            }
            
            tr td {
                padding: 4px;
            }
            
            table tr:nth-child(2n+1) {
                background-color: rgb(255, 240, 255);
            }
            
            table tr:nth-child(2n) {
                background-color: white;
            }
            
            tr td:nth-child(1) {
                width: 150px;
            }
            tr td:nth-child(2) {
                width: 750px;
                height: 20px;
                overflow: hidden;
            }
            
            tr td:nth-child(2) textarea {
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
            
            #header, #main, #footer {
                margin: 0px auto;
                padding: 10px;
                width: 1000px;
            }
            
            #header {
                color: white;

                padding: 1em;
                background: -webkit-linear-gradient(top, #e47ccc 0%, #c141a4 49%, #a80077 51%, #db34a4 100%);
                background: -moz-linear-gradient(top, #e47ccc 0%, #c141a4 49%, #a80077 51%, #db34a4 100%);
                background: -o-linear-gradient(top, #e47ccc 0%, #c141a4 49%, #a80077 51%, #db34a4 100%);
                background: -ms-linear-gradient(top, #e47ccc 0%, #c141a4 49%, #a80077 51%, #db34a4 100%);
                background: linear-gradient(top, #e47ccc 0%, #c141a4 49%, #a80077 51%, #db34a4 100%);
            }
            
            #main {
                min-height: 600px;
                background-color: #fdf1fe;
            }
            
            #main table {
                margin: 0px auto;
                background-color: white;
            }
            
            #footer {
                text-align: center;
                background: -webkit-linear-gradient(top, #e47ccc 0%, #c141a4 49%, #a80077 51%, #db34a4 100%);
                background: -moz-linear-gradient(top, #e47ccc 0%, #c141a4 49%, #a80077 51%, #db34a4 100%);
                background: -o-linear-gradient(top, #e47ccc 0%, #c141a4 49%, #a80077 51%, #db34a4 100%);
                background: -ms-linear-gradient(top, #e47ccc 0%, #c141a4 49%, #a80077 51%, #db34a4 100%);
                background: linear-gradient(top, #e47ccc 0%, #c141a4 49%, #a80077 51%, #db34a4 100%);
            }
            
            #header a, #footer a
            {
                color: #e0ffff;
            }
            
        </style>
        
        <script type="text/javascript">
            "use strict";

            var $id = function(id) { return document.getElementById(id); };
            var $create = function(tag) { return document.createElement(tag); };
            
            var createDataRow = function(file_name, data_url_scheme)
            {
                var row = $create("tr");
                // ファイル名
                var td = $create("td");
                td.innerHTML = file_name;
                row.appendChild(td);
                
                // Data URI scheme
                td = $create("td");
                row.appendChild(td);
                var ta = $create("textarea");
                td.appendChild(ta);
                ta.value = data_url_scheme;
                ta.rows = 4;
                ta.setAttribute("readonly", "readonly");
                ta.addEventListener("click", function(){ this.select(); }, false);
                
                // go
                td = $create("td");
                row.appendChild(td);
                var button = $create("button"); td.appendChild(button);
                button.innerHTML = "Go";
                button.addEventListener("click", function()
                {
                    window.open(data_url_scheme, file_name);
                }, false);
                
                return row;
            };
            
            var cancelEvent = function(e)
            {
                if (e.preventDefault) { e.preventDefault(); }
                return false;
            };
            
            var onSelectFile = function(e)
            {
                var files = e.target.files;
                for (var i=0; i<files.length; ++i) {
                    addDataURIScheme(files[i]);
                }
            };
            
            var onDropFile = function(e)
            {
                e.preventDefault();
                var files = e.dataTransfer.files;
                for (var i=0; i<files.length; ++i) {
                    addDataURIScheme(files[i]);
                }
            };
            
            var addDataURIScheme = function(file)
            {
                var reader = new FileReader();
                
                reader.onload = function(e) {
                    var name = file.name;
                    var data = e.target.result;
                    var row = createDataRow(name, data);
                    
                    $id("table").appendChild(row);
                };
                
                reader.readAsDataURL(file);
            };
            
            window.addEventListener("load", function()
            {
                document.addEventListener("dragover", cancelEvent, false);
                document.addEventListener("dragenter", cancelEvent, false);
                document.addEventListener("drop", onDropFile, false);
                $id("read-button").addEventListener("change", onSelectFile, false);
                
                var row;
                row = createDataRow("kenkyo.jpg", "");
                $id("table").appendChild(row);
            }, false);
            
        </script>
    </head>
    
    <body>
        <header id="header">
        <h1>Data URI Schemer</h1>
            <p>
                データを Data URI schemer に変換するツールです. <br />
                ファイルを選択, もしくはファイルをドラッグ & ドロップすると Data URI scheme に変換されたデータが表示されます.<br />
                クリックすると自動で全選択されるのでコピペして使ってください.
                このツールについてのエントリーは<a href="http://tmlife.net/programming/javascript/html5-file-api-readasdataurl-data-uri-scheme.html">こちら</a>
            </p>
        </header>
        
        <div id="main">
            <table border=1 id="table">
                <tr>
                    <th>ファイル名</th>
                    <th>Data URI scheme</th>
                    <th>Test</th>
                </tr>
            </table>
            <div style="text-align: right;">
                <input id="read-button" type="file" multiple />
            </div>
        </div>
        
        <footer id="footer">
            <p><a href="http://tmlife.net">Home</a></p>
        </footer>
    </body>
</html>








